import { RegClass } from "../core/serialize";
import AppNode from "../core/app_node.ts";
import data from "../core/cache_data.ts";

@RegClass("Client")
export default class Client extends AppNode {
    lbTitle: HTMLDivElement = null;
    frame: HTMLIFrameElement = null;
    selAsp: HTMLSelectElement = null;
    ebParams: HTMLInputElement = null;

    _src = "";
    get src() {
        return this._src;
    }
    set src(val) {
        this._src = val;
        this.frame.src = this._src + this.ebParams.value;
    }

    _isRotated = false;
    _asp: [number, number] = [16, 9];
    get asp() {
        if (this._isRotated) {
            return `${this._asp[0]} / ${this._asp[1]}`;
        }
        else {
            return `${this._asp[1]} / ${this._asp[0]}`;
        }
    }

    onLoad(): void {
        this.ebParams.value = data.storage.get("client-params", this.ebParams.value);
        this._isRotated = data.storage.get("client-rotate", this._isRotated);
        this.selAsp.selectedIndex = data.storage.get("client-asp-select", this.selAsp.selectedIndex);

        let asp = data.storage.get("client-asp", this._asp);
        this._asp = [asp[0], asp[1]];
        this.frame.style.aspectRatio = this.asp;
    }

    onClickClose() {
        this.subject.emit("dispose", this);
        this.dispose();
    }

    onSelectAspectRadio(evt) {
        let [n1, n2] = this.selAsp.value.split(",");
        this._asp[0] = Number(n1);
        this._asp[1] = Number(n2);
        data.storage.set("client-asp-select", this.selAsp.selectedIndex);
        data.storage.set("client-asp", this._asp.slice());
        this.frame.style.aspectRatio = this.asp;
    }
    onClickRefresh() {
        this.src = this._src;
    }

    onEditParam() {
        data.storage.set("client-params", this.ebParams.value);
    }

    onClickRotate() {
        this._isRotated = !this._isRotated;
        data.storage.set("client-rotate", this._isRotated);

        this.frame.style.aspectRatio = this.asp;
    }
};